<%@ page import="ar.com.photo_admin.domain.User"%>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta name="layout" content="main">
<calendar:resources lang="en" theme="aqua" />
</head>
<body>
	<div class="container">

		<!-- Password Modal Panel -->
		<div class="modal hide fade" id="passwordModal">
			<u:hasPassword>
				<g:render template="/user/changePassword" />
			</u:hasPassword>
			<u:hasNotPassword>
				<g:render template="/user/generatePassword" />
			</u:hasNotPassword>
		</div>

		<div class="page-header">
			<h1><g:message code="user.profile" /></h1>
		</div>

		<g:form id="profileForm" name="profileForm" controller="user"
			method="post" enctype="multipart/form-data">
			<div id="notifications">
				<g:if test="${flash.message}">
					<div class="alert alert-success">
						<a class="close" data-dismiss="alert">×</a>
						${flash.message}
					</div>
				</g:if>
				<g:if test="${flash.error}">
					<div class="alert alert-error">
						<a class="close" data-dismiss="alert">×</a>
						${flash.error}
					</div>
				</g:if>
			</div>
			
			<div id="eventHeader" class="row">
				<div id="thumbnailContainer" class="span3">
					
					<a class="profilePhotoLink"
						onclick="$('input[id=imageFile]').click();">
						
						<img id="coverPhotoImage"
							src="${createLink(controller:'user', action:'profileImage', id:user?.id, params: ['type': user?.useFacebookProfileImage])}"
							class="profilePhoto thumbnail"></img>
							</a> <input id="imageFile" name="imageFile" type="file" class="hidden">
					<g:actionSubmit id="uploadProfileImageButton" class="hidden"
						value="uploadProfileImageButton" action="uploadProfileImage" />
				</div>
	
				<div class="span9">
				
					<h2>${user?.username}</h2>
					<div class="separatorUsingBorder"></div>
				
					<g:textArea id="presentationText" name="presentationText" rows="3" maxlength="200"
									value="${user?.presentationText}"
									placeholder="${message(code: 'user.profile.presentation')}"></g:textArea>
				</div>
			</div>
			
			<div class="separator"></div>
			
			<div class="separatorUsingBorder"></div>
			<h2><g:message code="user.profile.social.networks" /></h2>
			
			<div class="form-horizontal">
					<label class="control-label"><img src="${resource(dir:'images', file: 'facebook.png') }" alt="image"></img></label>
					
					<div class="profileFacebookInfo">
					
						<f:hasFacebookAccount></f:hasFacebookAccount>
						
						<f:hasFacebookAccount>
							<h6><g:message code="user.profile.social.networks.facebook.connected.description"/></h6>
							
							<div class="profileFacebookButtons">
								<a class="btn btn-small" href="http://www.facebook.com/profile.php?ref=profile&id=${user?.facebookUid}" target="_blank">
									<g:message code="user.profile.social.networks.facebook.go"/></a>
								<g:link class="btn btn-small" controller="user" action="detachFacebookAccount"><g:message code="user.profile.social.networks.facebook.detach"/></g:link>
							</div>
						</f:hasFacebookAccount>
						
						<f:hasNotFacebookAccount>
							<h6 class="fl"><g:message code="user.profile.social.networks.facebook.attach"/>&nbsp;&nbsp;</h6>
							<fb:login-button id="facebookButton" class="facebookLoginButton"
								scope="email,publish_stream"
								onlogin="attachFacebookAccount();">
								<g:message code="auth.login.facebook" />
							</fb:login-button>
							
							<div class="cleaner"></div>
							
							<g:render template="/common/facebookLogoutIfNotCurrentUser"/>
						</f:hasNotFacebookAccount>	
					</div>
						
					
					<div class="cleaner"></div>
					
					<g:if test="${user?.facebookUid}">
						<div class="control-label" style="margin-top: 4px;">
							<g:checkBox name="useFacebookProfileImageCheckBox" value="${user?.useFacebookProfileImage}" />
							<g:actionSubmit id="useFacebookProfileImageButton" class="hidden" value="useFacebookProfileImageButton" action="useFacebookProfileImage" />
						</div>
						
						<div class="profileFacebookInfo">
							<h6 class="fl"><g:message code="user.profile.image.facebook"/>&nbsp;&nbsp;</h6>
						</div>
					</g:if>
			</div>

			<div class="cleaner"></div>

			<div class="separatorUsingBorder"></div>
			<h2><g:message code="user.profile.personal.data" /></h2>

			<div class="form-horizontal">

				<g:hasErrors bean="${user}">
					<g:eachError bean="${user}" var="error">
						<div id="signinErrors" class="alert alert-error">
							<a class="close" data-dismiss="alert">×</a>
							<g:message error="${error}" />
						</div>
					</g:eachError>
				</g:hasErrors>

				<g:hiddenField id="version" name="version" value="${user?.version}" />

				<div
					class="control-group ${hasErrors(bean: user, field: 'username', 'error')}">
					<label class="control-label" for="inputUserName"><g:message
							code="user.username" /></label>
					<div class="controls">
						<g:field id="inputUserName" class="input-large" type="text"
							name="username" value="${user?.username}"
							placeholder="${message(code: 'user.username')}"
							disabled="disabled" />
					</div>
				</div>
				
				<div
					class="control-group ${hasErrors(bean: user, field: 'name', 'error')}">
					<label class="control-label" for="inputName"><g:message
							code="user.name" /></label>
					<div class="controls">
						<g:field id="inputName" class="input-large" type="text"
							name="name" value="${user?.name}"
							placeholder="${message(code: 'user.name')}" />
					</div>
				</div>
				
				<div
					class="control-group ${hasErrors(bean: user, field: 'lastname', 'error')}">
					<label class="control-label" for="inputLastname"><g:message
							code="user.lastname" /></label>
					<div class="controls">
						<g:field id="inputLastname" class="input-large" type="text"
							name="lastname" value="${user?.lastname}"
							placeholder="${message(code: 'user.lastname')}" />
					</div>
				</div>

				<div
					class="control-group ${hasErrors(bean: user, field: 'email', 'error')}">
					<label class="control-label" for="inputEmail"><g:message
							code="user.email" /></label>
					<div class="controls">
						<g:field id="inputEmail" class="input-large" type="text"
							name="email" value="${user?.email}"
							placeholder="${message(code: 'user.email')}" disabled="disabled" />
					</div>
				</div>

				<div
					class="control-group ${hasErrors(bean: user, field: 'address', 'error')}">
					<label class="control-label" for="inputAddress"><g:message
							code="user.address" /></label>
					<div class="controls">
						<g:field id="inputAddress" class="input-large" type="text"
							name="address" value="${user?.address}"
							placeholder="${message(code: 'user.address')}" />
					</div>
				</div>

				<div
					class="control-group ${hasErrors(bean: user, field: 'birthday', 'error')}">
					<label class="control-label" for="inputBirthday"><g:message
							code="user.birthday" /></label>
					<div class="controls">
						<calendar:datePicker id="birthday" dateFormat="%d/%m/%Y"
							name="birthday" defaultValue="${user?.birthday}"
							years="1900,2050" />
					</div>
				</div>

				<div
					class="control-group ${hasErrors(bean: user, field: 'telephone', 'error')}">
					<label class="control-label" for="inputTelephone"><g:message
							code="user.telephone" /></label>
					<div class="controls">
						<g:field id="inputTelephone" class="input-large" type="text"
							name="telephone" value="${user?.telephone}"
							placeholder="${message(code: 'user.telephone')}" />
					</div>
				</div>

				<div
					class="control-group ${hasErrors(bean: user, field: 'captchaCode', 'error')}">
					<img class="control-label"
						src="${createLink(controller: 'simpleCaptcha', action: 'captcha')}"></img>

					<div class="controls">
						<g:field id="captchaCode" class="input-large" type="text"
							value="${user?.captchaCode}" name="captchaCode"
							placeholder="${message(code: 'user.captcha')}" />
					</div>
				</div>
			</div>

			<div class="btn-group">
				<g:actionSubmit class="btn btn-success"
					value="${message(code:'default.save.label')}" action="saveProfile" />

				<a data-toggle="modal" href="#passwordModal" class="btn btn-success">
					<u:hasPassword>
						<g:message code="user.profile.change.password" />
					</u:hasPassword> <u:hasNotPassword>
						<g:message code="user.profile.generate.password" />
					</u:hasNotPassword>
				</a>

				<g:link class="btn btn-success" controller="user"
					action="show">
					<g:message code="default.cancel.label" />
				</g:link>
			</div>
		</g:form>
	</div>
	
	<div class="separator"></div>

	<script type="text/javascript">
		jQuery(document).ready(function() {

			$('input[id=imageFile]').change(function() {
				$('#uploadProfileImageButton').click();
			});
		});
		
		function attachFacebookAccount() {
			FB.getLoginStatus(function(response) {
				if (response.status === 'connected') {
					location.href = "${createLink(action: 'attachFacebookAccount', controller: 'user')}"
				}
			});
		}
		
		$('input[id=useFacebookProfileImageCheckBox]').change(function() {
			$('#useFacebookProfileImageButton').click();
		});
	</script>
</body>
</html>
